import React, {useEffect, useState} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import {Menu} from './data.d';
import {modulesUrl} from "@/assets/constant/modulesUrl";
import TableList from "@/assets/components/tableList";
import {hooksSet} from "@/assets/utils/utils";
import {Form, InputNumber, message, Switch} from "antd";
import {TableConfigColumn} from "@/pages/report/TableConfigList/data";
import {save} from "@/assets/service/baseService";

const MenuList: React.FC<{}> = () => {
  const [form] = Form.useForm();


  const [columns, setColumns] = useState<ProColumns<Menu>[]>([
    {
      title: '名称',
      dataIndex: 'name',
      valueType: 'text',
    },
    {
      title: '访问地址',
      dataIndex: 'href',
    },
    {
      title: '排序',
      dataIndex: 'sort',
      width:150,
      renderText: (text, record:TableConfigColumn) => (
        <InputNumber style={{width:"100%"}} defaultValue={text} placeholder={"请输入排序"} onPressEnter={async (e) => {
          // @ts-ignore
          let value = e.target.value;
          const hide = message.loading('正在修改排序');
          await save(modulesUrl.sysMenu, Object.assign({}, record, {"sort": value}));
          message.success('排序修改成功！')
          hide()
        }}/>
      )
    },
    {
      title: '是否显示',
      dataIndex: 'isShow',
      hideInSearch: true,
      renderText: (text, record) => <Switch defaultChecked={text === "1"} disabled={true}/>
    },
    {
      title: '上级菜单',
      dataIndex: 'parent.id',
      valueType: "select",
      hideInSearch: true,
      hideInTable: true,
    },
  ]);

  /**
   * 启动加载
   */
  useEffect(() => {
  }, []);

  return (
    <TableList
      form={form}
      title="菜单管理"
      columns={columns}
      moduleUrl={modulesUrl.sysMenu}
      isNotUseModalForm={true}
      changeColumns={(columns: any) => hooksSet(setColumns, columns)}
    />
  );
};

export default MenuList;
